<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="卡券内容" prop="cardSn">
        <el-button v-if="dataForm.type==3" type="primary" @click="uploadHandle()">上传文件</el-button>
        <el-input v-model="dataForm.cardSn" :disabled="disabled" :readonly="dataForm.type==3" placeholder="内容"></el-input>
      </el-form-item>
      <el-form-item :disabled="disabled" label="过期时间" prop="expireTime">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          :disabled="disabled"
          v-model="dataForm.expireTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="dataForm.status" :disabled="disabled">
          <el-radio :label="0">可用</el-radio>
          <el-radio :label="1">已领取</el-radio>
          <el-radio :label="2">已使用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="类型" prop="status">
        <el-radio-group v-model="dataForm.type" :disabled="disabled">
          <el-radio :label="1">密钥</el-radio>
          <el-radio :label="2">链接</el-radio>
          <el-radio :label="92">点银卡券，小程序内中直接打开链接</el-radio>
          <el-radio :label="3">二维码</el-radio>
          <el-radio :label="4">第三方卡号和秘钥，前端展现逗号分隔</el-radio>
          <el-radio :label="5">第三方秘钥直接展现，可多条秘钥用逗号分隔</el-radio>
          <el-radio :label="6">第三方秘钥加二维码展现</el-radio>
          <el-radio :label="7">第三方秘钥加条形码展现</el-radio>
          <el-radio :label="8">第三方卡号、卡密,加条形码展示</el-radio>
          <el-radio :label="97">话费充值，不显示卡密（卡密随便填）</el-radio>
          <el-radio :label="98">微信代金券，不显示卡密</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    <upload v-if="uploadVisible" ref="upload" @setCardSn="setCardSn" @closeChild="uploadVisible=false"></upload>
  </el-dialog>
</template>

<script>
import Upload from '../oss/oss-private-upload'

export default {
  data() {
    return {
      disabled: false,
      uploadVisible: false,
      visible: false,
      dataForm: {
        goodsId: 0,
        cardSn: '',
        status: '',
        expireTime: '',
          type: 1
        },
        dataRule: {
          cardSn: [
            { validator:  (rule, value, callback) => {
                if (this.dataForm.type !== 3 && value === '') {
                  callback(new Error('不能为空！'));
                }
                callback();
              }, trigger: 'blur' }
          ],
          expireTime: [
          { validator:  (rule, value, callback) => {
              if (value === '') {
                callback(new Error('过期时间不能为空！'));
              }
              callback();
            }, trigger: 'blur' }
        ]
        }
      }
    },
    components: {
      Upload
    },
    methods: {
      init (id, disabled, goodsId) {
        this.disabled = disabled
        this.dataForm.id = id || ''
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: `/mall/cardsn/info/${this.dataForm.id}`,
              method: 'get'
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm = data.cardsn
              }
            })
          } else {
            this.dataForm.goodsId = goodsId
          }
        })
      },
      // 上传文件
      uploadHandle () {
        this.uploadVisible = true
        this.$nextTick(() => {
          this.$refs.upload.init()
        })
      },
      setCardSn (cardSn) {
        this.dataForm.cardSn = cardSn
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm']
          .validate((valid) => {
            if (valid) {
              this.$http({
                url: `/mall/cardsn/${!this.dataForm.id ? 'save' : 'update'}`,
                method: 'post',
                data: this.dataForm
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500
                  })
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            }
          })
      }
    }
  }
</script>
<style>
.v-modal{
  z-index: 2002!important;
}
</style>
